<template>
  <div class="customers container">
      <Alert v-if="alert" v-bind:msg="alert"></Alert>
      <h1 class="page-herder"><span class="glyphicon glyphicon-user"></span>用户管理系统</h1>
      <input type="text" class="form-control" placeholder="请输入搜索信息" v-model="filterInput">
     
     <table class="table table-striped">
         <thead>
             <tr>
                 <th>姓名：</th>
                 <th>电话：</th>
                 <th>邮箱：</th>
                 <th></th>
             </tr>
         </thead>
         <tbody>
             <tr v-for="customer in filterBy(customers,filterInput)">
                 <td>{{customer.name}}</td>
                 <td>{{customer.phone}}</td>
                 <td>{{customer.email}}</td>
                 <td><router-link class="btn btn-default" :to="'/customer/'+customer.id" >详情</router-link></td>
             </tr>
         </tbody>
     </table>
   
  </div>
</template>

<script>
import Alert from './Alert'
export default {
  name: 'customers',
  components:{
      Alert
  },
  data () {
    return {
        customers:[],
        alert:"",
        filterInput:""
    }
  },
  methods:{
      fetchCus(){
          this.$http.get("http://localhost:3000/users")
          .then(function(response){
            //   console.log(response)
            this.customers = response.body;
          })
      },
       filterBy(customers,value){
      return customers.filter(function(customer){
          return customer.name.match(value);
      })
  },
  },
 
  created(){
      if(this.$route.query.alert){
          this.alert = this.$route.query.alert
      }
      this.fetchCus();

  },
    updated(){
      this.fetchCus();
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
